<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-input v-model="filters.name" placeholder="UID、邮箱 或 用户名"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getUsers">查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="users" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column prop="uid" label="UID" width="100" sortable>
			</el-table-column>
			<el-table-column prop="username" label="用户名" sortable>
			</el-table-column>
			<el-table-column prop="email" label="邮箱" sortable>
			</el-table-column>
			<el-table-column prop="groupid" label="用户组" :formatter="formatGroups" sortable>
			</el-table-column>
			<el-table-column prop="regdate" label="注册时间" :formatter="formatTime" sortable>
			</el-table-column>
			<el-table-column prop="gold" label="淘币" sortable>
			</el-table-column>
			<el-table-column prop="status" label="账号状态" :formatter="formatStatus" sortable>
			</el-table-column>
			<el-table-column prop="emailstatus" label="邮箱状态" :formatter="formatEmailStatus" sortable>
			</el-table-column>
			<el-table-column prop="adminid" label="是否管理员" :formatter="formatAdminStatus" sortable>
			</el-table-column>
			<el-table-column label="操作" width="150">
				<template scope="scope">
					<el-button size="small" @click="handleCheck(scope.$index, scope.row)">通过</el-button>
					<el-button size="small" @click="handleReject(scope.$index, scope.row)">拒绝</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-button type="danger" @click="batchCheckOp" :disabled="this.sels.length===0">批量通过</el-button>
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
			</el-pagination>
		</el-col>

	</section>
</template>

<script>
	import util from '../../common/js/util'
	//import NProgress from 'nprogress'
	import { getAllChecks, getAllGroups, checkUser, batchCheck } from '../../api/api';

	export default {
		data() {
			return {
				filters: {
					name: ''
				},
				users: [],
				total: 0,
				page: 1,
				groups: [],
				listLoading: false,
				sels: [],//列表选中列

				editFormVisible: false,//编辑界面是否显示
				editLoading: false,
				editFormRules: {
					name: [
						{ required: true, message: '请输入姓名', trigger: 'blur' }
					]
				},
				//编辑界面数据
				editForm: {
					email: '',
					username: '',
					password: '',
					adminid: 0,
					groupid: 1,
					regdate: '',
					exp: 0,
					gold: 0,
					status: 0,
					emailstatus: 0
				},

			}
		},
		methods: {
			//邮箱状态显示转换
			formatEmailStatus: function (row, column) {
				return row.emailstatus == 1 ? '√' : 'x';
			},
			//管理员状态显示转换
			formatAdminStatus: function (row, column) {
				return row.adminid == 1 ? '√' : 'x';
			},
			//时间显示转换
			formatTime: function (row, column) {
				if(row.regdate != 0){
					var thisdate = new Date(row.regdate*1000);
					return thisdate.getFullYear()+"-"+(thisdate.getMonth()+1)+"-"+thisdate.getDate();
				}else{
					return "无";
				}
			},
			//用户组转换
			formatGroups: function (row, column) {
				for(var i=0; i<this.groups.length; i++){
					if(row.groupid == this.groups[i].groupid){
						return this.groups[i].grouptitle;
					}
				}
			},
			//状态显示转换
			formatStatus: function (row, column) {
				if(row.status == 0){
					return '正常';
				}else if(row.status == 1){
					return '已删除';
				}else if(row.status == 2){
					return '已禁用';
				}else if(row.status == 3){
					return '审核失败';
				}
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getUsers();
			},
			//获取用户列表
			getUsers() {
				let para = {
					'page': this.page,
					'name': this.filters.name
				};
				this.listLoading = true;
				var vue = this;
				//NProgress.start();
				getAllChecks(para).then((res) => {
					// console.log('suc');
					if(res.data.id == 1){
						vue.$alert(res.message, '读取失败', {
						confirmButtonText: '确定',
						callback: action => {}
						});
					}else if(res.data.id == 0){
						this.users = res.data.message;
						this.total = res.data.total;
						//this.total = res.message.length;
						getAllGroups().then((res) => {
							this.groups = res.data.message;
						});
					}
					//NProgress.done();
					this.listLoading = false;
				}).catch((error) => {
					vue.$notify.error({
					title: '无法连接到服务器',
					message: '请检查您的网络连接，稍后重试'
					});
				});
			},
			//审核
			handleCheck: function (index, row) {
					this.listLoading = true;
					//NProgress.start();
					let para = { id: row.uid, status: 0 };
					checkUser(para).then((res) => {
						this.listLoading = false;
						//NProgress.done();
						if(res.data.id == 0){
							this.$message({
								message: res.data.message,
								type: 'success'
							});
							this.getUsers();
						}else if(res.data.id == 1){
							this.$message({
								message: res.data.message,
								type: 'danger'
							});
						}
					}).catch((error) => {
						vue.$notify.error({
							title: '无法连接到服务器',
							message: '请检查您的网络连接，稍后重试'
						});
					});
			},
			//拒绝
			handleReject: function (index, row) {
					this.listLoading = true;
					//NProgress.start();
					let para = { id: row.uid, status: 3 };
					checkUser(para).then((res) => {
						this.listLoading = false;
						//NProgress.done();
						if(res.data.id == 0){
							this.$message({
								message: res.data.message,
								type: 'success'
							});
							this.getUsers();
						}else if(res.data.id == 1){
							this.$message({
								message: res.data.message,
								type: 'danger'
							});
						}
					}).catch((error) => {
						vue.$notify.error({
							title: '无法连接到服务器',
							message: '请检查您的网络连接，稍后重试'
						});
					});
			},
			selsChange: function (sels) {
				this.sels = sels;
			},
			//批量审核
			batchCheckOp: function () {
				var ids = this.sels.map(item => item.uid).toString();
				this.$confirm('确认通过选中记录吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					//NProgress.start();
					let para = { ids: ids };
					console.log(para);
					batchCheck(para).then((res) => {
						this.listLoading = false;
						//NProgress.done();
						this.$message({
							message: '操作成功',
							type: 'success'
						});
						this.getUsers();
					});
				}).catch(() => {

				});
			}
		},
		mounted() {
			this.getUsers();
		}
	}

</script>

<style scoped>

</style>